<template>
  <div class="grimm-card" :style="{...cardStyle}">
    <!-- card title area -->
    <div class="grimm-card-title-wrap" v-if="showTitle">
      <h1 class="grimm-card-title" :style="{...titleStyle}" v-if="showTitle">{{title}}</h1>

      <!-- tag or process or others -->
      <div class="grimm-card-title-extra">
        <grimm-tag
          class="grimm-card-tag"
          v-if="tag.tagContent"
          :content="tag.tagContent"
          :status="tag.tagStatus"
          :style="{...tag.tagStyle}"
        />
        <slot name="cardTitleRight"></slot>
      </div>
    </div>

    <!-- card content area -->
    <div class="grimm-card-content">
      <slot name="cardContent"></slot>
    </div>

    <!-- card footer area -->
    <div class="grimm-card-footer" v-if="showFooter">
      <slot name="cardFooter"></slot>
    </div>
  </div>
</template>

<script>
const COMPONENT_NAME = 'grimm-card';

export default {
  name: COMPONENT_NAME,
  props: {
    showTitle: {
      type: Boolean,
      default: true,
    },
    showFooter: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },

    // Example: { tagContent: '', tagStatus: '',  tagStyle: {} }
    tag: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // process: {
    //   type: String,
    //   default: '',
    // },
    cardStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    titleStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
};
</script>
<style lang="stylus"  scoped>
@import '../../common/stylus/variable.styl';

$color = #f5f5f5;

.grimm-card {
  padding: 16px 12px 0;
  background: #fff;

  .grimm-card-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    height: fit-content;
  }

  .grimm-card-title {
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
    color: #333;
  }

  .grimm-card-content {
    padding-bottom: 16px;
    font-size: 14px;
    color: #666;
  }

  .grimm-card-footer {
    padding: 12px 0;
    border-top: 1px dashed #E5E5E5;
  }
}
</style>